<style>
    .section{
        padding-top: 50px;
    }
    .section1 img,.section2 img,.section3 img,.section4 img{
        width: 100%;
        height: 100%;
        -webkit-transition: 1s ease-out;
        -moz-transition: 1s ease-out;
        -ms-transition: 1s ease-out;
        -o-transition: 1s ease-out;
        transition: 1s ease-out;
    }
    .section1 img,.section4 img{
        -webkit-transform: scale(1,1);
        -moz-transform: scale(1,1);
        -ms-transform: scale(1,1);
        -o-transform: scale(1,1);
        transform: scale(1,1);
    }
    .section2 img{
        -webkit-transform: skew(20deg, 0deg);
        -moz-transform: skew(20deg, 0deg);
        -ms-transform: skew(20deg, 0deg);
        -o-transform: skew(20deg, 0deg);
        transform: skew(20deg, 0deg);
    }
    .section3 img{
        opacity: 0.2;
    }
    .navbar{
        position: fixed;
        top: 0px;
        left:0px;
        width: 100%;
        z-index: 99999;
    }
    p {color: #000; font-size: 20em;}
</style>

<template>
    <header-index></header-index>
    <div id="page">
        <div class="section section1"><img src="./static/section1.jpg"/></div>
        <div class="section section2"><img src="./static/section2.jpg"/></div>
        <div class="section section3"><img src="./static/section3.jpg"/></div>
        <div class="section section4"><img src="./static/section4.jpg"/></div>
    </div>
</template>

<script>
    import HeaderIndex from '../../Component/Header/Header.vue'
    
    export default {
        components: {
            HeaderIndex
        },
        ready: function() {
            $("#page").fullpage({
                //sectionsColor:["#B5A8A7","#E9E6D3","blue","green"],
                navigation:true,
                navigationTooltips:["海滩","稻田","美女","豪车"],
                showActiveTooltip:true,
                fixedElements:"#navbar",
                anchors:["s1","s2","s3","s4"],
                afterLoad:function(anchor,index){
                    if(index == 1){
                        $(".section1 img").css("transform","scale(1.1,1.1)");
                    }
                    else if(index == 2){
                        $(".section2 img").css("transform","skew(0deg,0deg)");
                    }
                    else if(index == 3){
                        $(".section3 img").css("opacity","1");
                    }
                    else if(index == 4){
                        $(".section4 img").css("transform","scale(1.1,1.1)");
                    }
                },
                onLeave:function(index,next,dir){
                    if(index == 1){
                        $(".section1 img").css("transform","scale(1,1)");
                    }
                    else if(index == 2){
                        $(".section2 img").css("transform","skew(20deg,0deg)");
                    }
                    else if(index == 3){
                        $(".section3 img").css("opacity","0.3");
                    }
                    else if(index == 4){
                        $(".section4 img").css("transform","scale(1,1)");
                    }
                }
            });
        }
    }
</script>